<template>
    <div
        class="advancedFun-main color-filter"
    >
        <vi-popover>
            <template slot="content">
                <div class="btn-content">将歪斜图像自动校正回正常角度。</div>
            </template>
            <div
                class="advancedFun-main-btn"
                :class="{'wxjz': curAdvancedFunBtn === 1}"
                @click="selectAdvancedFun(1)"
            >

                <img id="wxjz" src="../../assets/image/wxjz.png" alt="歪斜校正">
                <span
                    class="advancedFun-main-btn-name"
                >歪斜校正</span>
            </div>
        </vi-popover>

        <vi-popover>
            <template slot="content">
                <div class="btn-content">高拍图像，自动切除黑边，优化卷宗成像质量。</div>
            </template>
            <div
                class="advancedFun-main-btn"
                :class="{'txqb': curAdvancedFunBtn === 2}"
                @click="selectAdvancedFun(2)"
            >

                <img id="txqb" src="../../assets/image/txqb.png" alt="图像切边">
                <span
                    class="advancedFun-main-btn-name"
                >图像切边</span>
            </div>
        </vi-popover>

        <vi-popover>
            <template slot="content">
                <div class="btn-content">无法拆卷的高拍场景，自动提取主要页面内容。</div>
            </template>
            <div
                class="advancedFun-main-btn"
                :class="{'flqf': curAdvancedFunBtn === 3}"
                @click="selectAdvancedFun(3)"
            >

                <img id="flqf" src="../../assets/image/flqf.png" alt="分栏切分">
                <span
                    class="advancedFun-main-btn-name"
                >分栏切分</span>
            </div>
        </vi-popover>

        <vi-popover>
            <template slot="content">
                <div class="btn-content">自动检测手印、签章、手写签名，并去除对文字识别的干扰。</div>
            </template>
            <div
                class="advancedFun-main-btn"
                :class="{'qzqgr': curAdvancedFunBtn === 4}"
                @click="selectAdvancedFun(4)"
            >

                <img id="qzqgr" src="../../assets/image/qzqgr.png" alt="手印签章去干扰">
                <span
                    class="advancedFun-main-btn-name"
                >手印签章去干扰</span>
            </div>
        </vi-popover>

        <vi-popover>
            <template slot="content">
                <div class="btn-content">表格类文书，高度还原电子档原件的版式和内容。</div>
            </template>
            <div
                class="advancedFun-main-btn"
                :class="{'bgsb': curAdvancedFunBtn === 5}"
                @click="selectAdvancedFun(5)"
            >

                <img id="bgsb" src="../../assets/image/bgsb.png" alt="表格识别">
                <span
                    class="advancedFun-main-btn-name"
                >表格识别</span>
            </div>
        </vi-popover>

    </div>
</template>

<script>
import activeShowMinxin from '../../mixin/activeShow.mixin';

export default {
    mixins: [activeShowMinxin],
    data () {
        return {
            curAdvancedFunBtn: 0
        };
    },
    methods:{
        selectAdvancedFun(index) {
            if (index === this.curAdvancedFunBtn) return;
            if (index !== 4) {
                // this.setLoadingLabel(`高级功能请求中...`);
            }
            this.curAdvancedFunBtn = index;
            this.setAdvancedFunButtonStatus(index);
            localStorage.setItem('advancedFunButtonStatus', index);
            // this.doAdvancedFun(index);
        },
        doAdvancedFun(type) {
            if (this.curAdvancedFunBtn === 4 || this.curAdvancedFunBtn === 5 ) return;
            let fileId = this.fileId;
            if (this.fileItem.fileType && this.fileItem.fileType.toLowerCase() === 'pdf') {
                fileId = this.pdfItem.id;
            }
            if (!fileId) return;
            let opt = _.cloneDeep(this.$url.correctingPic);
            opt.url = `${this.$url.correctingPic.url}?fileId=${fileId}&operType=${type}`;
            this.$http(opt, {}).then(res => {
                // console.log(res,);
                let fileIdx = this.fileId;
                if (this.fileItem.fileType && this.fileItem.fileType.toLowerCase() === 'pdf') {
                    fileIdx = this.pdfItem.id;
                }
                if( res.body.fileId === fileIdx && res.body.operType == this.curAdvancedFunBtn ){
                    if (res.state.ok == 1) {
                        this.setAdvancedFunImgSrc(res.body.imgSrc);
                    } else {
                        this.setAdvancedFunImgSrc('');
                        this.$message.error(`${res.state.failed}`);
                    }
                }

                // this.setLoadingLabel(``);
            })
            .catch(error => {
                // this.setLoadingLabel(``);
                this.$message.error('高级功能请求失败！');
            });
        },
        // 获取 示例文件夹的文件id
        getExampleFolderId() {
            for (let i = 0; i < this.folderList.length; i++) {
                if (this.folderList[i].dirType === 1) {
                    return {id: this.folderList[i].id, index: i};
                }
            }
        }
    },
    mounted () {
        if( localStorage.getItem('advancedFunButtonStatus') ){
            let status = JSON.parse(localStorage.getItem('advancedFunButtonStatus'));
            this.curAdvancedFunBtn = status;
            this.setAdvancedFunButtonStatus(status);
        } else {
            this.setAdvancedFunButtonStatus(1);
            this.curAdvancedFunBtn = 1;
            localStorage.setItem('advancedFunButtonStatus', 1);
        }
        // this.doAdvancedFun(this.curAdvancedFunBtn);
    },
    watch: {
        fileId(newVal) {
            if (newVal) {
                this.doAdvancedFun(this.curAdvancedFunBtn);
            }
        },
        pdfItem(newValue) {
            if(!newValue){
                return
            }
            if (
                newValue &&
                newValue.id &&
                this.fileItem.fileType &&
                (this.fileItem.fileType.toLowerCase() == "pdf")
            ) {
                this.doAdvancedFun(this.curAdvancedFunBtn);
            }
        },
        advancedFunButtonStatus(newValue) {
            if (newValue && this.dirId !== this.getExampleFolderId().id) {
                this.doAdvancedFun(this.curAdvancedFunBtn);
            }
        }
    },
    computed: {
        fileItem() {
            return this.$store.state.activeFile.item;
        },
        pdfItem() {
            return this.$store.state.activeFile.pdfItem;
        },
        fileId() {
            let item = this.$store.state.activeFile.item;
            return item ? item.id : null;
        },
        fileList() {
            return this.$store.state.file.fileList;
        },
        advancedFunStatus() {
            return this.$store.state.status.advancedFunStatus;
        },
        advancedFunButtonStatus() {
            return this.$store.state.status.advancedFunButtonStatus;
        },
        advancedFunOcrStatus() {
            return this.$store.state.status.advancedFunOcrStatus;
        },
        folderList() {
            return this.$store.state.file.folderList;
        },
        dirId() {
            return this.$store.state.user.dirId;
        }
    },
};
</script>

<style lang="less" scoped>
    .advancedFun-main{
        height: 40px;
        line-height: 40px;
        width: 100%;
        margin: 0 0 15px 0;
        display: flex;
        justify-content: flex-end;
    }

    .advancedFun-main-btn{
        width: 140px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #fff;
        border-radius: 4px;
        margin: 0 0 0 10px;
        cursor: pointer;
        img{
            padding: 0px 10px 5px 0;
        }
        &:hover{
            background-color: rgba(@primary, 0.4);
            border: 1px solid rgba(@primary, 0.4);
            color: #fff;
        }
        &:hover #wxjz{
            content: url('../../assets/image/wxjz_hover.png')
        }
        &:hover #txqb{
            content: url('../../assets/image/txqb_hover.png')
        }
        &:hover #flqf{
            content: url('../../assets/image/flqf_hover.png')
        }
        &:hover #qzqgr{
            content: url('../../assets/image/qzqgr_hover.png')
        }
        &:hover #bgsb{
            content: url('../../assets/image/bgsb_hover.png')
        }
    }

    .wxjz, .txqb, .flqf, .qzqgr, .bgsb{
        border: 1px solid @primary;
        background-color: @primary;
        color: #fff;
    }
    .wxjz #wxjz{
        content: url('../../assets/image/wxjz_hover.png')
    }
    .txqb #txqb{
        content: url('../../assets/image/txqb_hover.png')
    }
    .flqf #flqf{
        content: url('../../assets/image/flqf_hover.png')
    }
    .qzqgr #qzqgr{
        content: url('../../assets/image/qzqgr_hover.png')
    }
    .bgsb #bgsb{
        content: url('../../assets/image/bgsb_hover.png')
    }

    .advancedFun-main-btn-name{
        font-size: 14px;
    }

    .btn-content{
        width: 120px;
        padding: 10px;
        font-size: 12px;
    }
</style>
